<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="./favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>FastChat</title>
    <script src="./js/tailwindcss-jit-cdn.umd.min.js"></script>
  </head>
  <body>
    <div v-scope class="flex w-full h-full text-sm bg-gray-50" @vue:mounted="mounted">
      <div class="lg:max-w-lg lg:h-[980px] m-auto w-full h-full">
        <div class="flex flex-col h-full bg-white shadow-xl">
          <!-- <div class="h-[3px] bg-green-400 duration-200 origin-left" :style="`transform:scaleX(1)`"></div> -->
          <div class="h-[60px] flex items-center border-b p-4">
            <i class="ri-links-line text-2xl px-1 text-gray-400 cursor-pointer hover:text-green-400 active:text-green-600" title="分享链接" @click="share"></i>
            <!-- <h2 class="flex-1 text-sm text-center font-mono font-medium text-lg text-green-400">塑料</h2> -->
            <div class="flex-1 flex h-full"><img class="h-full mx-auto" src="./images/fastchat.svg"></div>
            <i class="ri-file-shred-line text-2xl px-1 text-gray-400 cursor-pointer hover:text-green-400 active:text-green-600" title="双向清空" @click="burn"></i>
          </div>
          <div class="flex-1 overflow-y-auto" @vue:mounted="ref('listEl', $el)">
            <ul v-cloak class="flex flex-col gap-4 p-4 my-2">
              <li v-for="(item, index) in chats" :class="`flex flex-col gap-1 ${item.role===selectedRole ? 'items-end': 'items-start'}`">
                <h4 :class="[`text-xs`, {'text-blue-500':item.role===selectedRole, 'text-green-400':item.role==='FastChat'}]">
                  <span>{{item.role}}</span>
                  <span v-if="showIP">{{`&nbsp;(${ipAddress})`}}</span>
                </h4>
                <p :class="[`px-3 py-2 text-black/70 font-mono bg-gray-100 rounded`, {'bg-blue-100':item.role===selectedRole, 'bg-green-100':item.role=='FastChat'}]" v-html="item.content"></p>
              </li>
            </ul>
          </div>
          <div class="flex gap-2 px-4 pt-4 pb-10 bg-gray-50 h-[94px]">
            <select class="text-sm bg-white" v-model="selectedRole">
              <option v-for="(item, index) in roles" :value="item">{{item}}</option>
            </select>
            <textarea class="flex-1 text-sm bg-white whitespace-pre-wrap resize-none" @keydown="handleKeyDown" type="text" v-model="currentChat" placeholder="请输入..."></textarea>
            <button class="bg-green-400 text-white px-4 text-sm !outline-none active:bg-green-600" @click="send">发送</button>
          </div>
        </div>
      </div>
    </div>
    <script type="module" src="./src/main.js"></script>
  </body>
</html>